<template>
  <div class="con-box address">
    <!-- 删除地址弹窗 -->
    <div class="popup-mask" v-if="showDelete"></div>
    <div class="popup-box" v-if="showDelete" :style="this.$store.state.locale =='en'?'min-width: 510px':''">
      <div class="tit">
        <div class="text">确删除该提报人</div>
        <div class="close" @click="showDelete = false"></div>
      </div>
      <div class="con">
        <div class="tip">
          <div class="tip-icon warning"></div>
          <div class="tip-info">
            <div class="result">确定要删除该提报人吗</div>
            <div class="date">删除后将不能恢复，请慎重</div>
            <div class="btns">
              <a href="javascript:void(0)" class="btn-r" @click="deleteAddr()">{{$t('delete')}}</a>
              <a href="javascript:void(0)" class="btn-g" @click="showDelete = false">{{$t('cancel')}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除地址弹窗 -->
    <div class="add-address">
      <a href="javascript:void(0)"  class="add-btn" @click="allSele">全选</a>
      <div class="add-limit" style="margin-right: auto;">
       已选择
        <span class="number" >{{ selectArr.length }}</span>个
      </div>
      <el-button class="add-btn btn" type="danger"  @click="showAddOrUpdateDialog(0)">创建提报人</el-button>
    </div>
    <div class="address-list" v-if="tbList.length">
      <div
        class="item items"
        v-for="(item,index) in tbList"
        :key="index"

      >
      <input type="checkbox" :checked="item.checked" @click='select(index)'>
      <div class="right" style="width: 100%;">
        <div class="item-row">
            <div class="name"> {{item.name}} </div>
            <div class="phone-number"> {{item.mobile}} </div>

            <div class="action-box">
              <span class="edit" @click="showAddOrUpdateDialog(1,item.id)"></span>
              <span class="delete" @click="showDeleteDialog(item.id)"></span>
            </div>
          </div>
          <div
            class="address-detail"
          >{{ item.department }}</div>
        </div>
      </div>
    </div>
     <div class="add-address">
      <a href="javascript:void(0)" style="margin-right: 500px;"  class="add-btn add-btns" @click="save">保存</a>
    </div>
    <div class="empty" v-if="!tbList.length">
      <div class="img">
        <img src="~/assets/images/emptyPic/address-empty.png" alt />
      </div>
      <div class="action">
        <div class="text">{{$t('address.notAddAdress')}}</div>
        <!-- <nuxt-link to="/" class="btn">回到首页</nuxt-link> -->
      </div>
    </div>
    <addOrEditTbren
      v-if="showAdd"
      ref="addOrUpdate"
      :editAddrId="editAddrId"
      @toggleAddrPop="refreshChange"
    ></addOrEditTbren>
  </div>
</template>

<script>
import { _debounce } from "~/plugins/util";   //防抖
import addOrEditTbren from '~/components/add-or-edit-tbren'
import Cookie from 'js-cookie'
export default {
  data () {
    return {
      userAddressList: [],  //地址信息
      showDelete: false,
      deleteId: 0,
      editAddrId: '',
      showAdd: false,
      loading: false,
      showAddBtn: false,
      tbList:[],
      selectArr:[]
    }
  },
  components: {
    addOrEditTbren
  },
  mounted () {
    // 设置网页标题
    document.title = '选择提报人'
    //获取提报人list
    this.getTibao()
  },
  methods: {
    //全选
    allSele(){
      this.tbList=this.tbList.map(item=>{
        item.checked=true
        return {
          ...item
        }
      })
      this.selectArr=this.tbList.filter(item=>{
        return item.checked
      })
    },
    //保存
    save(){
      this.$router.push({
        path:'/user-center/xt-establish',
        query:{
          arr:this.selectArr
        }
      })
    },
    //选中
    select(index){
      this.tbList[index].checked=!this.tbList[index].checked
      this.selectArr=this.tbList.filter(item=>{
        return item.checked
      })
    },
    //获取提报人list
    getTibao(){
      this.$axios({
        method:  'get',
        url: '/p/cp/submit/person/info' ,
      }).then(({ data }) => {
          this.tbList=data.map(item=>{
            return {
              ...item,
              checked:false
            }
          })
      })
    },
    //新增获取修改投保人
    showAddOrUpdateDialog (st, addId) {
      if (st == 0) {
        this.showAdd = true
        return
      }
      this.editAddrId = addId
      this.showAdd = true
    },
    /**
     * 刷新回调
     */
    refreshChange (visible) {
      this.showAdd = visible
      // 获取信息
      this.$axios.get('/p/cp/submit/person/info').then(({ data }) => {
       this.tbList=data.map(item=>{
         return {
           ...item,
           checked:false
         }
       })
       console.log(this.tbList)
      })
    },

    /**
     * 删除地址
     */
    showDeleteDialog  (addrId) {
      this.showDelete = true
      this.deleteId = addrId
    },

    deleteAddr: _debounce(function () {
      this.$axios.delete('/p/cp/submit/person/delete/' + this.deleteId).then(({ data1 }) => {
        this.$axios.get('/p/cp/submit/person/info').then(({ data }) => {
          this.$message({
            message: '删除提报人成功',
            type: 'success',
            duration: 1000
          })
          this.tbList = data
          this.showDelete = false
        })
      })
    }, 800)

  },
}
</script>

<style scoped src='~/assets/css/uc-address.css'></style>
<style scoped>
.area .el-input__inner,
.el-input,
.el-input__prefix,
.el-input__suffix,
.el-select-dropdown__item,
.el-select-dropdown__empty {
  color: #000;
  font-size: 12px;
}

.el-select-dropdown {
  margin-left: -6px;
}

.address .popup-box .con .edit .item .btn-r {
  height: 16px;
}
.items {
  display: flex;

}
.items .right {
    margin-left: 20px;
  }
  .add-btns {
    margin: 0 auto;
    margin-top: 40px;

    font-size: 18px;
    padding: 16px 25px;
  }
.add-btn {
  background-color: #409EFF !important;
  border:none !important;
}
input {
  margin-top: 10px;
}
</style>
